---
layout: layout.njk
date: Last Modified
description: Online HTML Template formatter. Reformat your HTML templates online with djLint.
keywords: online template formatter, djLint, HTML, templates, formatter, linter, rules, online html template formatter
---




  <div class="container is-fluid pb-5">
  <hr class="mt-0" />
    <h1 class="title is-3 mb-0">{{ "demo_description" | i18n | safe }}</h1>
    <small class="mb-4  is-italic is-block" id="djlint-version"></small>

    <div class="block" id="djlint-status">
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-spinner fa-spin"></i>
      </span>
      <span><strong>Loading djLint ..</strong></span>
      </span>
    </div>
    <div class="columns is-hidden">

      <div class="column is-narrow">

<form id="djlint-settings">
  <div class="field">
  <label class="label">Custom Blocks <a href="/docs/configuration/#custom-blocks" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a></label>
  <div class="control">
    <input id="settings-custom-blocks" class="input" type="text" placeholder="toc,example">
  </div>
</div>
<div class="field">
  <label class="label">Ignore Blocks <a href="/docs/configuration/#ignore-blocks" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a></label>
  <div class="control">
    <input id="settings-ignore-blocks" class="input" type="text" placeholder="toc,example">
  </div>
</div>

 <div class="field">
  <label class="label">Custom HTML <a href="/docs/configuration/#custom-html" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a></label>
  <div class="control">
    <input id="settings-custom-html" class="input" type="text" placeholder="mjml,simple-greeting,mj-\w+">
  </div>
</div>

<div class="field">
  <label class="label">Indent <a href="/docs/configuration/#indent" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a></label>
  <div class="control">
    <input id="settings-indent" class="input" type="text" placeholder="4">
  </div>
</div>

<div class="field">
  <label class="label">Blank Line after Tag <a href="/docs/configuration/#blank-line-after-tag" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a></label>
  <div class="control">
    <input id="settings-blank-line-after-tag" class="input" type="text" placeholder="load,extends,include">
  </div>
</div>
<div class="field">
  <label class="label">Blank Line before Tag <a href="/docs/configuration/#blank-line-before-tag" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a></label>
  <div class="control">
    <input id="settings-blank-line-before-tag" class="input" type="text" placeholder="load,extends,include">
  </div>
</div>

<div class="field">
  <label class="label">Profile  <a href="/docs/configuration/#profile" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a></label>
  <div class="control">
    <div class="select">
  <select id="settings-profile" >
    <option value="html">html (default)</option>
    <option value="django">django</option>
    <option value="jinja">jinja</option>
    <option value="nunjucks">nunjucks (nunjucks and twig)</option>
    <option value="handlebars">handlebars (handlebars and mustache)</option>
    <option value="golang">golang</option>
    <option value="angular">angular</option>
  </select>
</div>
  </div>
</div>

<div class="field">
  <label class="label">Max Line Length <a href="/docs/configuration/#max-line-length" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a></label>
  <div class="control">
    <input id="settings-max-line-length"  class="input" type="text" placeholder="80">
  </div>
</div>
<div class="field">
  <label class="label">Max Attribute Length <a href="/docs/configuration/#max-attribute-length" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a></label>
  <div class="control">
    <input id="settings-max-attribute-length" class="input" type="text" placeholder="0">
  </div>
</div>
<div class="field">
<label class="checkbox">
  <input id="settings-format-attribute-template-tags" type="checkbox">
  Format Attribute Template Tags <a href="/docs/configuration/#format-attribute-template-tags" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label  class="checkbox">
  <input id="settings-preserve-leading-space" type="checkbox">
  Preserve Leading Space <a href="/docs/configuration/#preserve-leading-space" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label  class="checkbox">
  <input id="settings-preserve-blank-space" type="checkbox">
  Preserve Blank Space <a href="/docs/configuration/#preserve-blank-lines" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
  <input id="settings-format-js"  type="checkbox">
  Format JS <a href="/docs/configuration/#format-js" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
  <input id="settings-format-css"  type="checkbox">
  Format CSS <a href="/docs/configuration/#format-css" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
  <input id="settings-close-void-tags"  type="checkbox">
  Close Void Tags <a href="/docs/configuration/#close-void-tags" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
  <input id="settings-ignore-case"  type="checkbox">
  Ignore Case <a href="/docs/configuration/#ignore-case" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
  <input id="settings-line-break-after-multiline-tag"  type="checkbox">
  Line Break After Multiline Tag <a href="/docs/configuration/#line-break-after-multiline-tag" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
  <input id="settings-no-line-after-yaml"  type="checkbox">
  No Line After YAML <a href="/docs/configuration/#no-line-after-yaml" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
  <input id="settings-no-function-formatting"  type="checkbox">
  No Function Formatting <a href="/docs/configuration/#no-function-formatting" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>
<div class="field">
<label class="checkbox">
  <input id="settings-no-set-formatting"  type="checkbox">
  No Set Formatting <a href="/docs/configuration/#no-set-formatting" target="_blank"><span class="icon has-text-grey-light">
  <i class="fas fa-circle-question"></i>
</span></a>
</label>
</div>


</form>
      </div>
      <div class="column" id="djlint-input">
      </div>
      <div class="column" id="djlint-output">
      </div>
    </div>
  </div>

{% rollup "src/static/js/editor.js" | url %}
